<template>
    <div class="app-container">
        <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
            </el-form-item>
            <el-form-item>
                <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
                    <el-option :value="1" label="高级讲师"/>
                    <el-option :value="2" label="首席讲师"/>
                </el-select>
            </el-form-item>
            <el-form-item label="添加时间">
                <el-date-picker
                    v-model="teacherQuery.begin"
                    type="datetime"
                    placeholder="选择开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="teacherQuery.end"
                    type="datetime"
                    placeholder="选择截止时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 表格 -->
        <el-table

            :data="list"
            element-loading-text="数据加载中"
            border
            fit
            highlight-current-row>
            <el-table-column
                label="序号"
                width="70"
                align="center" >
                <template slot-scope="scope">
                    {{ (current - 1) * size + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="200"/>
            <el-table-column label="头衔" width="150">
                <template slot-scope="scope">
                    {{ scope.row.level===1?'高级讲师':'首席讲师' }}
                </template>
            </el-table-column>

            <el-table-column prop="intro" label="资历"/>
            <el-table-column prop="gmtCreate" label="添加时间" width="250"/>
            <el-table-column prop="sort" label="排序" width="70"/>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/teacher/edit/'+scope.row.id">
                        <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    </router-link>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="getList"
            @current-change="getList"
            :current-page="current"
            :page-size="size"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
	//引入调用teacher.js文件
	import teacher from '@/api/edu/teacher'

	export default {
		data() { //定义变量和初始值
			return {
				list: null,
				total: 0,
				current: 1,
				size: 10,
				teacherQuery: {}
			}

		}
		,
		created() {//页面渲染之前执行
			this.getList();
		},
		methods: { //具体方法
			getList(current = 1) {
				this.current = current;
				teacher.getPageExample(this.current, this.size, this.teacherQuery)
					.then(response => {
						console.log(response)
						const data = response.data;
						this.list = data.rows;
						this.total = data.total;
						console.log(this.list)
						console.log(this.total)
					})
			},
			resetData() {//清空
				//表单数据项清空
				this.teacherQuery = {}
				//查询所有讲师数据
				this.getList()

			},
			removeDataById(id) {

				this.$confirm('此操作将删除该讲师记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					teacher.deleteById(id).then(response => {
						//提示信息
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						//回到列表页面
						this.getList()
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			}
		}
	}
</script>

<style scoped>

</style>